<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body{
            background:url(bg.jpg) no-repeat ;
        }
        span{
            background: blue;
        }
    </style>
  </head>
  <body>
    <!-- 1.0-666 -->
    <!-- <script>
      
      var reg = /^(66[0-6]$|^6[0-5][0-9]$|^[0-5]?[0-9]?[0-9])$/;
      var str = "498";
      console.log(reg.test(str));
    </script> -->

    <!-- 2. -->
    <form action="">
      姓名:<input type="text" class="username" placeholder="中文名字 ：2-4位"/><br />
      Q Q:<input type="text" class="qq" placeholder="QQ号"/><br />
      密码:<input type="password" class="password" placeholder="密码不低于8位"/><span class="pWalert"></span><br /> 
      手机:<input type="text" class="phone" /><br />
      邮箱:<input type="text" class="emali" /><br />

      <input type="submit" value="提交" class="subbtn" />
    <script>
      var res = true;
      var userdata = [];
      var userobj = {};
      // 中文名字 ：2-4位；[\u4e00-\u9fa5]  匹配中文字符
      var cNamereg = /^[\u4e00-\u9fa5]{2,4}$/g;
      var usernameEle = document.querySelector(".username");
      usernameEle.onchange = function () {
        //也可以用onblur
        var str = usernameEle.value;
        if (cNamereg.test(str)) {
          userobj.username = str; this.style.color="green"
        } else {
          res = false; this.style.color="red"
        }
      };
      // 密码  :1.密码不低于8位
    // 2.如果是纯数字或者纯字母 密码强度低
    // 3.包含数字字母 密码强度中
    // 4.包含数字字母下划线且有大写字母 密码强度高
      var PWreg = /^\w{8,}$/; //QQ
      document.querySelector(".password").onchange = function () {
        var str = this.value;
        
        if (PWreg.test(str)) {
          userobj.password = str;
          var reg1=/^[0-9]{8,}$|^[a-zA-Z]{8,}$/;
          var reg2=/^[0-9a-zA-Z]{8,}$/;
          document.querySelector(".pWalert").innerHTML="密码强"
          document.querySelector(".pWalert").style.color="green"
          if(reg2.test(str)){
            document.querySelector(".pWalert").innerHTML="密码强度中等"
          document.querySelector(".pWalert").style.color="yellow"
          if(reg1.test(str)){
            document.querySelector(".pWalert").innerHTML="密码强度低等"
          document.querySelector(".pWalert").style.color="green"
          }
        } if(!PWreg.test(str)) {
          res = false;
          document.querySelector(".pWalert").innerHTML="密码错"
        }
      };
    }
         // qq号  :开头1-9 中间0-9 总 5-11位
         var QQreg = /^[1-9]\d{4,10}$/; //QQ
      document.querySelector(".qq").onchange = function () {
        var str = this.value;
      
        if (QQreg.test(str)) {
          userobj.qqnumber = str;
        } else {
          res = false;
        }
      };
      // 邮箱： 首字母不能是下划线，其余数字字母下划线构成 @数字字母(2-多个).2-4字母.2-4字母（可有可无）
      var emalireg =
        /^[1-9a-zA-Z]\w{1,}@([1-9a-zA-Z]{2,}).([a-zA-Z]){2,4}$/;
      document.querySelector(".emali").onchange = function () {
        var str = this.value;
      
        if (emalireg.test(str)) {
            this.style.color="green"
          userobj.email = str;
        } else {
          res = false;
          this.style.color="red"
        }
      };
//手机号
      var phonereg = /^1[3-9]\d{9}$/; 
      document.querySelector(".phone").onchange = function () {
        var str = this.value;
        if (phonereg.test(str)) {
            this.style.color="green"
          userobj.phonenumber = str;
        } else {
          res = false;
          this.style.color="red"
        }
      };
      document.querySelector(".subbtn").onclick = function (e) {
        if (res) {
          userdata.push(userobj);
          alert("注册over")
        } else {
          // e.preventDefault();
          alert("注册失败 重新填写")
        }
      };
    </script>
  </body>
</html>
